{{ header }}
<div id="account-subscription" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    <div id="content" class="col">{{ content_top }}
      <h1>{{ heading_title }}</h1>
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <td class="text-start" colspan="2">{{ text_subscription_detail }}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-start" style="width: 50%;"><b>{{ text_subscription_id }}</b> #{{ subscription_id }}
                <br/>
                <b>{{ text_date_added }}</b> {{ date_added }}
                <br/>
                <b>{{ text_status }}</b> {{ subscription_status }}
                <br/>
                <b>{{ text_payment_method }}</b> {{ payment_method }}</td>
              <td class="text-start" style="width: 50%;"><b>{{ text_order_id }}</b> <a href="{{ order }}">#{{ order_id }}</a></td>
            </tr>
          </tbody>
        </table>
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <td class="text-start">{{ text_description }}</td>
              <td class="text-start">{{ text_quantity }}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-start" style="width: 50%;"><a href="{{ product }}">{{ name }}</a><br/>{{ description }}</td>
              <td class="text-start" style="width: 50%;">{{ product_quantity }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      {{ history }}
      {{ order }}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}
